//创建外壳组件
import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

class App extends Component {
  state = {
    toDoList: [
      { id: 1, title: '吃饭', done: false },
      { id: 2, title: '睡觉', done: true },
      { id: 3, title: '打代码', done: false },
      { id: 4, title: '看电影', done: false }
    ]
  }
  addTodo = (todoObj) => {
    const newArr = [todoObj, ...this.state.toDoList]
    this.setState({
      toDoList: newArr
    })
  }
  updateTodo = (id, done) => {
    const arr = this.state.toDoList.map((item) => {
      if (item.id === id) return { ...item, done }
      else return item
    })
    this.setState({
      toDoList: arr
    })
  }
  deleteTodo = (id) => {
    if (window.confirm('确定要删除吗？')) {
      const arr = this.state.toDoList.filter((item) => item.id !== id)
      this.setState({
        toDoList: arr
      })
    }
  }
  changeAll = (done) => {
    const { toDoList } = this.state
    const arr = toDoList.map((item) => {
      return { ...item, done }
    })
    this.setState({
      toDoList: arr
    })
  }
  clearDone = () => {
    const { toDoList } = this.state
    const arr = toDoList.filter((item) => !item.done)
    this.setState({
      toDoList: arr
    })
  }
  render() {
    const { toDoList } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List
            toDoList={toDoList}
            updateTodo={this.updateTodo}
            deleteTodo={this.deleteTodo}
          />
          <Footer
            toDoList={toDoList}
            changeAll={this.changeAll}
            clearDone={this.clearDone}
          />
        </div>
      </div>
    )
  }
}
export default App
